<template>
   <div  class="container">
  
 {{ name }}
 {{ age }}
 <button @click="updateName">修改姓名</button>
 
   </div>
</template>

<script>
import {reactive, toRef, toRefs} from 'vue'
export default {
name:'App',

setup() {
// 将对象中的所有属性都转换成响应式对象   其实可以在定义的时候避免 用一个定义一个即可

  const obj = reactive({
   name:'ls',
   age:18
  })
//   console.log(obj); //有proxy才是响应式数据 objectRef
//  展开或者结构响应式对象，都会变成普通数据不可
// const {name,age} =obj
// console.log(name,age);
// const obj2={...obj}
// console.log(obj2);
  const obj3=toRefs(obj)
  console.log(obj3);
  const updateName=()=>{
      console.log('updateName');
      // toRef转换响应式数据包装成对象，value是存放值的地方
      obj3.name.value='zs'//toref或者 torefs 都要点value
      // obj.name='zs' //改原来的数据也行，数据是联通的。
    }
    return {...obj3,updateName}
},

}
</script>

<style>

</style>